<!--
 * @Date: 2023-02-20 14:57:32
 * @LastEditTime: 2023-02-20 16:29:45
 * @FilePath: /hash-guess-game/src/components/ListState/ListState.vue
 * 介绍:
-->
<script lang="ts" setup>
import type { StateType } from "@@/hooks/usePagingRequest";
const props = defineProps<{
  type?: StateType;
  message?: string;
}>();
</script>

<template>
  <div class="ListState">
    <template v-if="props.type == 'null'">
      <van-empty
        class="ListState__null"
        :description="props.message || $t(`mei-you-gen-duo-shu-ju-le`)"
      />
    </template>
    <template v-else-if="props.type == 'err'">
      <van-empty
        class="ListState__error"
        image="error"
        :description="props.message || 'request error'"
      />
    </template>
    <template v-else-if="props.type == `end`">
      <span class="ListState__end">{{
        props.message || $t(`mei-you-gen-duo-shu-ju-le`)
      }}</span>
    </template>
  </div>
</template>

<style lang="less" scoped>
.ListState__null {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.ListState__error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.ListState__end {
  color: #aaa;
}
</style>
